CSS3 target 伪类实现 Tab 标签切换

CSS3 伪类实现 Tab 标签切换

:target 是 CSS3 中新增的一个伪类,用以匹配当前页面的 URI 中某个标志符的目标元素。简单来说,当前页面 URL 下添加 #news 就会定位到 id=“news” 的位置,使用 :target 伪类可以像 :hover 等伪类一样对目标元素定义样式。

W3C 上的用法示例:

See the Pen eNBZvB by leozhang (@leozhang) on CodePen.

Tab 标签切换效果如下:

See the Pen zGoOJP by leozhang (@leozhang) on CodePen.

实现的基本原理:

将 tab 内容框设置为绝对定位,然后通过 :target 伪类调整其 z-index

无「民事行为能力」人慎点